Nesta página demonstramos novamente como fazer uma solicitação de dados ao servidor e atualizar a página atual sem recarregar a página toda novamente.

No processo get a página corrente envia um request via httprequest e recebe os dados do servidor.

Neste exemplo abaixo será carregado a lista das UFs do Brasil assim que o botão for clicado vinda de um arquivo texto no servidor web.

---

Código:

    <script>
        var request = false;
        try {
            request = new XMLHttpRequest();
        } catch (trymicrosoft) {
            try {
                request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (othermicrosoft) {
                try {
                    request = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (failed) {
                    request = false;
                }
            }
        }
        if (!request)
            alert("Error initializing XMLHttpRequest!");

        function getCustomerInfo() {
            var url = "08-AjaxDados.txt";
            request.open("GET", url, true);
            request.onreadystatechange = updatePage;
            request.send(null);
        }

        function updatePage() {
            if (request.readyState == 4) {
                if (request.status == 200) {
                    var conteudo = "";
                    var response = request.responseText.split("|");
                    for (i = 0; i < response.length; i++) {
                        conteudo += response[i] + "\n";
                    }
                    document.getElementById("Texto").value = conteudo;
                } else
                    alert("status is " + request.status);
            }
        }
    </script>
</head>

        <input type="button" value="Clique Aqui" size="14" name="botao" onClick="getCustomerInfo();">
        <br><br>
        <textarea id="Texto" cols=20 rows=10> </textarea>

Dados (arquivo 08-AJAX-DADOS.TXT):
AC|AL|AM|AP|BA|CE|DF|ES|GO|MA|MT|MS|MG|PA|PB|PR|PE|PI|RJ|RN|RS|RO|RR|SC|SP|SE|TO|